<template>
  <!-- <text class="title" @click="goSign">去签名</text> -->
  <view class="article tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">{{ article.articleTitle }}</tn-navbar>
    <view class="article-content" v-html="article.articleContent">

    </view>
    <view class="sign-tools tn-bg-main" @click="goSign()">
      {{ btnValue }}
      <view v-if="countDownShow">
        (<tn-count-down :time="5" :option="countDownOption" @end="endCountDown"></tn-count-down>)
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnCountDown from "@/tuniao-ui/components/tn-count-down/src/CountDown.vue";
import { findArticleById } from "@/api/article"
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { ResultEnum } from "@/enums/httpEnum";
import { CountDownOption } from "@/tuniao-ui/types";
import { api } from "@/config";
import { useUserStore } from "@/tuniao-ui/store/user";
import { saveMemberSign } from "@/api/purchase";
import { navLogin, navBack , navPage} from "@/tuniao-ui/utils";
import { loading, closeLoading } from "@/tuniao-ui/utils/messageUtils";

const userStore = useUserStore();
// 自定义配置
const countDownOption: CountDownOption = {
  day: false,
  hour: false,
  minute: false
}
interface Article {
  id: number;
  articleClassifyId: number;
  articleTitle: string;
  cover: string;
  articleContent: string;
  status: number;
  sort: number;
  updateTime: number;
  createTime: number;
}
const articleId = ref(1);

const article: Article = reactive({
  id: 0,
  articleClassifyId: 0,
  articleTitle: '',
  cover: '',
  articleContent: '',
  status: 0,
  sort: 0,
  updateTime: 0,
  createTime: 0,
});

const countDownShow = ref(true);
const btnValue = ref("请阅读协议");

// 上传相关参数
const action: string = `${api.base}/buyer/uploader`;
const formData: Record<string, any> = {
  scene: "sign",
};
const header: Record<string, any> = {
  Authorization: `Bearer ${userStore.getToken}`,
};


function endCountDown() {
  countDownShow.value = false;
  btnValue.value = "确认阅读,去签名";
}

function saveSign(signImg: string) {
  if (signImg) {
    saveMemberSign({ "signImg": signImg }).then((res) => {
      closeLoading();
      if (res.code === ResultEnum.SUCCESS) {
        navPage("/");
      } else {
        navLogin();
      }
    });
  } else {
    // 异常跳转到登录页
    navLogin();
  }
}

onLoad(() => {
  // 监听生成签字的图片地址
  uni.$on("sign", (img) => {
    console.log("img", img);
    loading({title:"签名中"});
    // //其他操作 比如上传签字图片
    uni.uploadFile({
      url: action,
      filePath: img,
      name: 'file',
      header: header,
      success: (uploadFileRes) => {
        //console.log(uploadFileRes.data);
        let result = JSON.parse(uploadFileRes.data);
        console.log(result)
        saveSign(result.result.url);
      }
    });
  });

  findArticleById({ id: articleId.value }).then((res: any) => {
    if (res.code === ResultEnum.SUCCESS) {
      const articleInfo = res.result;
      if (articleInfo.status === 1) {
        Object.assign(article, articleInfo);
      }
    }
  });
});
onUnload(() => {
  uni.$off("sign"); //移除监听事件
});

const goSign = () => {
  if (!countDownShow.value) {
    uni.navigateTo({
      url: "/pages/purchase/lib/component/signBoard",
    });
  }
};
</script>
<style lang="scss" scoped>
.article-content {
  padding: 20rpx;
  background-color: #fff;
  padding-bottom: 100rpx;
}

.sign-tools {
  height: 100rpx;
  padding: 0 20rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
</style>
